<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head">
				<hx-navbar ref="hxnb" :config="config" v-if="primarySize()"></hx-navbar>
				<hx-navbar ref="hxnb" :config="configo" v-else></hx-navbar>
			</view>
			
			<image :src="institution.image_text" mode="aspectFill" class="top_bg"></image>
			<view class="box">
				<view class="pr z2 plr30 pb30">
					<image :src="cdnurl(institution.logo)" mode="aspectFill" class="logo"></image>
					<view class="tc mt30 fwb fs34 col3 lh48 pt98">{{institution.name}}</view>
					<view class="tc mt10 fs24 col9 lh34">{{institution.district.name}}｜{{institution.purpose}}</view>

					<view class="detail_item mt40">
						<view class="describe_tit">机构介绍</view>
						<view class="describe_text">
							<text>
								{{institution.description}} 
							</text>
						</view>
					</view>
					<view class="detail_item mt40">
						<view class="flex-box">
							<view class="describe_tit">机构地址</view>
							<view class="flex-grow-1 flex-box flex-end">
								<image src="https://admin.mosizp.cn/static/public/icon_guide.png" mode="aspectFill" class="ico28"></image>
								<view class="fs24 col3 pl10" @click="bindShowLocation">去这里</view>
							</view>
						</view>
						<map id="map" :enable-scroll="false" :longitude="institution.lng" :latitude="institution.lat" scale="14" :markers="markers" @markertap="bindShowLocation" show-location class="map"></map>
					</view>
					<view class="detail_item mt40">
						<view class="flex-box">
							<view class="describe_tit flex-grow-1">机构图片</view>
							<image class="arrow-r" src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix"></image>
						</view>
						<view class="clearfix">
							<view class="info_img" v-for="(item,index) in institution.images_text" @click="bindImagesPrev(index)">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="describe_tit mt40">在发布培训</view>
					<view class="posts_list">
						<view class="posts_item" v-for="(item,index) in jobs">
							<view class="flex-box">
								<view class="fwb fs36 col3 m-ellipsis pr15 maxw60">{{item.name}}</view>
								<view class="urgent">{{item.category.name}}</view>
								<view class="flex-grow-1 tr fs28 fwb col4">线下课程</view>
							</view>
							<view class="mt15 col6 fs24 m-ellipsis">{{item.institution.name}}</view>
							<view class="flex-box mt20">
								<view class="flex-grow-1 lh34">
									<view class="col6 fs24">计划{{item.plan_count}}人</view>
									<view class="flex-box mt20">
										<image src="https://admin.mosizp.cn/static/public/icon_time.png" mode="widthFix" class="ico24"></image>
									<view class="pl10 col9 fs22">{{item.train_start_text}}至{{item.train_end_text}}</view>
									</view>
								</view>
								<view @click="bindJobDetail(item.id)" class="btn ac" v-if="item.enroll_status == 1">立即报名</view>
								<view class="btn" v-else-if="item.enroll_status == 2">已报满</view>
							</view>
						</view>
						
						<view class="nothing" v-if="jobsMore.nothing">
							<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
							<text>暂无培训职位</text>
						</view>
						<view class="g-btn3-wrap" v-else>
							<view class="g-btn3" @click="getJobs()">{{jobsMore.text}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				config: {
					color: '#fff',
					back: true,
					title: '培训机构详情',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#000', '#000']],
					slideBackgroundColor: [1, ['#2FC971', '#4cd964']],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				config0: {
					color: '#fff',
					back: true,
					title: '培训机构详情',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#000', '#000']],
					slideBackgroundColor: [1, ['#2FC971', '#4cd964']],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				institutionId: 0,
				institution: {images_text: []},
				markers: [],
				jobs: [],
				jobsMore: {page: 1}
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad(options) {
			
			this.institutionId = options.id;
			this.getInstitutionDetail();
			this.getJobs()
		},
		onReachBottom() {
			this.getJobs()
		},
		methods: {
			getInstitutionDetail(){
				this.$core.get({url: '/xilujob.train/institution_detail',data: {institution_id: this.institutionId},success:ret=>{
					if(ret.data.lat!=0) {
					  this.markers.push({
					    id: 0,
					    latitude: ret.data.lat,
					    longitude: ret.data.lng,
					    width: 35,
					    height: 35,
					    callout: {
					      content: ret.data.address, //文本
					      color: '#000000', //文本颜色
					      borderRadius: 3, //边框圆角
					      borderWidth: 1, //边框宽度
					      borderColor: '#ffffff', //边框颜色
					      bgColor: '#ffffff', //背景色
					      padding: 5, //文本边缘留白
					      display: "ALWAYS",
					      textAlign: 'center' //文本对齐方式。有效值: left, right, center
					    }
					  });
					}
					this.institution = ret.data;
				}});
			},
			getJobs(){
				this.$util.fetch(this, 'xilujob.train/jobs', {institution_id: this.institutionId,pagesize: 10}, 'jobsMore', 'jobs', 'data', 'unique');
			},
			bindJobDetail(id){
				uni.navigateTo({
					url: '/pages/user/train_info?id='+id
				})
			},
			bindShowLocation() {
			    uni.openLocation({
			      latitude: Number(this.institution.lat),
			      longitude:  Number(this.institution.lng),
			      name: this.institution.name,
			      address: this.institution.address,
			    });
			},
			//预览
			bindImagesPrev(index){
				uni.previewImage({
					urls: this.institution.images_text,
					current: index
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_bg {
		width: 750rpx;
		height: 450rpx;
		position: absolute;
		top: 0;
		z-index: 1;
		left: 0;

	}

	.box {

		position: relative;
		z-index: 2;
		margin-top: 350rpx;

		&:before {
			content: '';
			width: 750rpx;
			height: 548rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FE 100%);
			border-radius: 58rpx 58rpx 0rpx 0rpx;
			position: absolute;
			z-index: 1;
		}

		.logo {
			width: 136rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 50%;
			top: -68rpx;
			left: 50%;
			transform: translateX(-50%);
			display: block;
			position: absolute;
		}
	}

	.pt98 {
		padding-top: 98rpx;
	}

	.detail_item {
		padding: 30rpx;
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
	}

	.describe_tit {
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.describe_text {
		line-height: 54rpx;
		font-size: 26rpx;
		color: #333333;
	}

	.describe_tit::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 136rpx;
		height: 17rpx;
		background: var(--primary);
		opacity: 0.3
	}

	.describe_tit.tit1 {
		margin: 0 0 30rpx;
		font-size: 36rpx;
	}

	.describe_tit.tit1::after {
		width: 149rpx;
		height: 14rpx;
		border-radius: 7rpx;
		background: #0167D2;
		opacity: 0.3
	}

	.map {
		margin-top: 30rpx;
		width: 100%;
		height: 284rpx;
		display: block;
		border-radius: 18rpx;
	}

	.info_img {
		width: calc((100% - 30rpx)/3);
		margin-right: 15rpx;
		border-radius: 4rpx;
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.06);
		height: 224rpx;
		margin-top: 30rpx;
		float: left
	}

	.info_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.info_img:nth-child(3n) {
		margin-right: 0
	}

	.arrow-r {
		width: 10rpx;
	}

	.posts_list {
		padding-bottom: 10rpx;
	}

	.posts_item {
		width: 690rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 20rpx;

		.tips_item {
			height: 32rpx;
			background: #ECEFF5;
			border-radius: 4rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #A5A5A5;
			line-height: 32rpx;
			display: inline-block;
			vertical-align: top;
			margin-right: 10rpx;
			margin-top: 10rpx;
			padding: 0 8rpx;
		}

		.urgent {
			min-width: 74rpx;
			padding:  0 5rpx;
			height: 37rpx;
			line-height: 33rpx;
			text-align: center;
			font-size: 24rpx;
			color: #FF7B20;
			border-radius: 6rpx;
			border: 2rpx solid #FF7B20;
		}

		.company_cover {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
		}
	}

	.foot_nav {
		padding: 10rpx 60rpx;
	}
	.btn{
		width: 166rpx;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #C3C3C3;
		border-radius: 8rpx;
		&.ac{
			background: var(--primary);
		}
	}
</style>